<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>

<body>
<section class="layui-larry-box">
    <div class="larry-personal">
        <blockquote class="layui-elem-quote layui-text">
            <span>添加订单</span>
        </blockquote>
        <form class="layui-form" action="add_order" method="post">
            <div class="layui-form-item">
                <label class="layui-form-label">订单id</label>
                <div class="layui-input-block">
                    <input type="text" name="id" autocomplete="off"
                           class="layui-input" lay-verify="required">
                </div>
            </div>
<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label">发货人姓名</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="text" name="shipper" autocomplete="off" class="layui-input"  value="">-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label">发货人地址</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="text" name="shippingAddress"  autocomplete="off" class="layui-input" value="">-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label">发货人电话</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="text" name="shipperPhone"  autocomplete="off" class="layui-input" value="">-->
<!--                </div>-->
<!--            </div>-->
            <div class="layui-form-item">
                <label class="layui-form-label">收件人姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="receiver"  autocomplete="off"
                           class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">收件人地址</label>
                <div class="layui-input-block">
                    <input type="text" name="receiverAddress"  autocomplete="off"
                           class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">收件人手机</label>
                <div class="layui-input-block">
                    <input type="text" name="receiverPhone"  autocomplete="off"
                           class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">选择店铺</label>
                <div class="layui-input-block">
                    <select id="shops" name="shops" lay-filter="shops" lay-verify="required">
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">选择商品</label>
                <div class="layui-input-block">
                    <select id="products" name="products" lay-verify="required">
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button  class="layui-btn" lay-submit lay-filter="add_order">添加</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</section>
</body>

<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
    $.ajax({
        url: 'get_all_shops',
        method: 'get',
        async: false,
        success: function (shops) {
            shops.sort();
            let shops_select = document.getElementById('shops');
            shops_select.options.add(new Option('', ''));
            for (let i = 0; i < shops.length; i++) {
                shops_select.options.add(new Option(shops[i], `${i}`));
            }
        },
        error: function () {
            layer.msg('获取所有商店名称错误!', {
                icon: 2,
                time: 2000
            });
        }
    });

    layui.use('form', function() {
        let form = layui.form;
        form.render();

        form.on('select(shops)', function () {
            let shopName = this.innerText;
            $.ajax({
                url: 'get_products_by_shop_name',
                data: {
                    'shopName': shopName
                },
                method: 'post',
                async: false,
                success: function (products) {
                    products.sort();
                    let product_select = document.getElementById('products');
                    product_select.options.add(new Option('', ''));
                    for (let i = 0; i < products.length; i++) {
                        product_select.options.add(new Option(products[i], `${i}`));
                    }
                    form.render();
                },
                error: function () {
                    layer.msg('获取商品错误!', {
                        icon: 2,
                        time: 2000
                    });
                }
            });
            return false;
        });

        form.on('submit(add_order)', function(data) {
            let order = {
                'id': parseInt(data.field.id),
                'shopName': $('#shops option:selected').text(),
                'productName': $('#products option:selected').text(),
                'receiver': data.field.receiver,
                'receiverAddress': data.field.receiverAddress,
                'receiverPhone': data.field.receiverPhone,
            };
            $.ajax({
                url: 'add_order',
                dataType: 'json',
                data: order,
                method: 'post',
                success: function (res) {
                    $(':input').val('');
                    $('#products').find('option').remove();
                    form.render();
                    if (res) {
                        layer.msg('添加订单成功!', {
                            icon: 1,
                            time: 2000
                        });
                    } else {
                        layer.msg('库存已空!', {
                            icon: 2,
                            time: 2000
                        });
                    }
                },
                error: function () {
                    layer.msg('添加订单错误!', {
                        icon: 2,
                        time: 2000
                    });
                }
            });
            return false;
        });
    });
</script>

</html>